<template>
	<div id="app">
		<!-- <router-view/> -->
		
		<!-- keep-alive无差别攻击 所以要加一个 meta-->
		<keep-alive>
			<router-view v-if="$route.meta.keep">
				<!--这里是会被缓存的路由-->
			</router-view>
		</keep-alive>
		
		<router-view v-if="!$route.meta.keep">
			<!--因为用的是v-if 所以下面还要创建一个未缓存的路由视图出口-->
		</router-view>
		<!-- vue组件加载的过程 把原来的清掉 释放了 新的放上去 -->
		
		<!-- 加了keep-alive后 切换组件后  会把组件的v-node放到一个对象中缓存  当再次回来刚才的组件时 不用重新创建 而是从这个对象里去找 找到后直接恢复  所以他可以记录一些状态 -->
	</div>
</template>

<style lang="less">

	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	nav {
		padding: 30px;

		a {
			font-weight: bold;
			color: #2c3e50;

			&.router-link-exact-active {
				color: #42b983;
			}
		}
	}
</style>
